<template>
  <div>
    <div style="display: flex;">
      <div>
        <el-upload
            class="upload-demo"
            drag
            :show-file-list="false"
            action="http://localhost:8090/HDFS/upload"
            :headers="heders"
            :multiple="true"
            :before-upload="beforeUpload"
            :on-success="uploadSuccess">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </div>

      <!--      空间使用率-->
      <div style="margin-top: 10px;margin-left: 70px">
        <div v-if="space<=60">
          <div style="text-align: center;">空间充足</div>
          <el-progress type="circle" :percentage="this.space" :stroke-width="8" status="success"
                       style="margin-top: 15px"></el-progress>
        </div>
        <div v-else-if="space<=90">
          <div style="text-align: center;">空间紧张</div>
          <el-progress type="circle" :percentage="this.space" :stroke-width="8" status="warning"
                       style="margin-top: 15px"></el-progress>
        </div>
        <div v-else>
          <div style="text-align: center;">空间不足</div>
          <el-progress type="circle" :percentage="this.space" :stroke-width="8" status="exception"
                       style="margin-top: 15px"></el-progress>
        </div>
      </div>


      <!--      充值功能-->
      <div style="display: flex;margin-top: 20px">
        <el-card style="width: 300px;height: 100px;margin-left: 100px;">
          当前积分: {{ score }}<br><br>
          用户权限: {{ isVIP }}
        </el-card>
        <div>
          <el-button style="height: 40px;width:80px;margin-left: 20px;margin-top: 5px" type="primary"
                     @click="BuyIntegral">
            积分购买
          </el-button>
          <br>
          <el-button style="height: 40px;width:80px;margin-left: 20px;margin-top: 10px" type="primary" @click="BuyVIP">
            vip购买
          </el-button>
        </div>
      </div>
      <div style="margin-left: 50px;margin-top: 30px">
        <el-button type="primary" style="margin-left:30px" slot="reference" @click="shareBtn(sureShare)">分享<i
            class="el-icon-share"></i></el-button>
        <el-button type="warning" style="margin-left:30px;margin-top: 20px" slot="reference" @click="shareBtn(noShare)">
          取消分享<i
            class="el-icon-share"></i></el-button>
      </div>
    </div>
    <br>

    <!--充值模态窗口-->
    <el-dialog :title='otherData.windowName' :visible.sync="buyIntegral" width="400px">
      <el-form label-width="80px" style="margin-top: -10px">
        <el-form-item label="充值金额 :">
          <el-input autocomplete="off" style="width: 200px;" v-model="money"></el-input>
          <el-button type="primary" @click="QRCode" style="margin-left: 10px">确 定</el-button>
        </el-form-item>
      </el-form>
      <div style="font-size: 10px;text-align: center;margin-top: 10px" v-if="!vip">普通用户，1元可兑换10积分</div>
      <div style="font-size: 10px;text-align: center;margin-top: 10px" v-if="vip">vip用户，1元可兑换12积分</div>
    </el-dialog>
    <!--  二维码模态窗口  -->
    <el-dialog :title='otherData.windowName' :visible.sync="zxingVisible" width="350px">
      <img id="zxing" :src="imageUrl"/>
    </el-dialog>

    <el-dialog :title='otherData.windowName' :visible.sync="VIPVisible" width="350px">
      <div style="font-size: 10px;text-align: center;margin-top: 10px">
        <img id="VIPzxing" :src="imageUrl"/><br>
        <el-popover
            placement="bottom"
            title="VIP特权"
            width="250"
            trigger="hover"
            content="1.充值成功后，即可获取100积分2.vip用户购买积分，可获得8折优惠">
          <a slot="reference">vip用户特权</a>
        </el-popover>
      </div>
    </el-dialog>

    <!--        列表-->
    <el-table :data="fileData" stripe border :header-cell-class-name="headerBg"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="fileName" label="文件名" width="200px"></el-table-column>
      <el-table-column prop="fileType" label="文件类型" width="100px"></el-table-column>
      <el-table-column prop="fileSize" label="文件大小 (兆)" width="100px"></el-table-column>
      <el-table-column prop="fileTime" label="上传时间" width="140px"></el-table-column>
      <el-table-column prop="fileDescription" label="描述"></el-table-column>
      <el-table-column prop="123" label="下载" width="100px">
        <template slot-scope="scope">
          <el-button type="success" @click="downloadBtn(scope.row.fileName)">下载<i class="el-icon-download"></i>
          </el-button>
        </template>
      </el-table-column>

      <el-table-column label="操作"
                       align="center"
                       fixed="right"
                       width="250px">
        <template slot-scope="scope">
          <el-button type="primary" slot="reference" @click="collectBtn(scope.row)">收藏 <i
              class="el-icon-star-off"></i></el-button>
          <el-button type="warning" class="mr-5 ml-5" slot="reference" @click="editBtn(scope.row)">编辑<i
              class="el-icon-edit"></i></el-button>
          <el-popconfirm
              confirm-button-text='确定'
              cancel-button-text='点错了'
              icon="el-icon-info"
              icon-color="red"
              title="确定删除吗？"
              @confirm="delectBtn(scope.row.fileName)">
            <el-button type="danger" slot="reference">删除<i class="el-icon-remove-outline"></i></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!--        分页-->
    <div class="pd-5">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total=total>
      </el-pagination>
    </div>


    <el-dialog title='文件内容描述' :visible.sync="dialogFormVisible" width="400px">
      <div style="height: 100px">
        <el-input
            type="textarea"
            placeholder="请输入内容"
            size="big"
            maxlength="100"
            autosize
            v-model="fileDescription"
            show-word-limit>
        </el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="fileDesc">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      heders: {
        token: JSON.parse(localStorage.getItem("user")).token
      },
      //文件数据
      fileData: [],
      //分页数据
      total: 0,
      pageNum: 1,
      pageSize: 5,

      //使用空间
      space: 0,

      //分享、取消分享
      sureShare: 1,
      noShare: 0,

      headerBg: 'headerBg',

      //编辑模态窗口
      dialogFormVisible: false,
      //编辑信息
      fileDescription: "",
      fileName: "",

      userID: JSON.parse(localStorage.getItem("user")).id,

      vip: 0,
      score: 0,

      isVIP: "普通用户",

      //充值模态窗口
      buyIntegral: false,
      //二维码模态窗口
      zxingVisible: false,
      //vip模态窗口
      VIPVisible: false,
      otherData: {
        windowName: ''
      },

      //充值金额
      money: null,

      imageUrl: "",
    }

  },
  created() {
    this.load()
  },
  mounted() {
    this.request.get("/userExtend/" + this.userID).then(
        res => {
          this.score = res.data.integral
          this.vip = res.data.isVip
        },
        Error => {
          console.log(Error)
        })
  },
  watch: {
    fileData(newVal, oldVal) {  //普通函数式监听
      var useSpace = 0
      for (var i = 0; i <= newVal.length - 1; i++) {
        useSpace += newVal[i].fileSize
      }
      this.space = useSpace / 1024 * 100
    },
    vip(){
      if(this.vip!==0){
        this.isVIP = "vip用户"
      }else{
        this.isVIP = "普通用户"
      }
    }
  },
  methods: {
    //加载文件信息
    load() {
      this.request.get('/HDFS/page', {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        }
      }).then(
          res => {
            if (res.code == 200) {
              this.fileData = res.data.records
              this.total = res.data.total
            }
          },
          Error => {
            console.log(Error)
          }
      )
    },
    // 正在上传,请稍后
    beforeUpload() {
      this.$message.warning("正在上传,请稍后. . .")
    },
    // 上传文件
    uploadSuccess(res) {
      if (res.code == 200) {
        this.$message.success("上传成功")
        this.load()
      } else {
        this.$message.error(res.msg)
      }
    },
    //分享
    shareBtn(isShare) {
      //解决map报错问题
      if (this.multipleSelection == null) {
        this.$message.error("请先选择文件")
        return;
      }
      let fileNames = this.multipleSelection.map(v => v.fileName)
      if (fileNames.length == 0 && isShare == 1) {
        this.$message.error("请选择要分享的文件")
        return;
      }
      if (fileNames.length == 0 && isShare == 0) {
        this.$message.error("请选择要取消分享的文件")
        return;
      }
      this.request.post('/course/update/' + fileNames + "" + isShare).then(
          res => {
            if (res.code == 200 && isShare == 1) {
              this.$message.success("分享成功")
            }
            if (res.code == 200 && isShare == 0) {
              this.$message.success("取消分享成功")
            }
          },
          Error => {
            this.$message.success("分享失败")
            console.log(Error)
          }
      )
    },
    //删除
    delectBtn(fileName) {
      this.request.delete('/HDFS/delete/' + fileName).then(
          res => {
            if (res.code == 200) {
              this.$message.success("删除成功")
              this.load()
            }
          },
          Error => {
            this.$message.success("删除失败")
            console.log(Error)
          }
      )
    },
    //下载
    downloadBtn(fileName) {
      this.request.get("/HDFS/download/" + fileName).then(
          res => {
            if (res.code == 200) {
              this.$message.success("下载成功,默认路径D盘HDFS文件夹下")

            }
          },
      )
    },
    //描述
    editBtn(row) {
      this.dialogFormVisible = true
      this.fileName = row.fileName
      this.fileDescription = row.fileDescription
    },
    fileDesc() {
      this.request.put('/course/update/description/' + this.fileName + "/" + this.fileDescription).then(
          res => {
            if (res.code == 200) {
              this.$message.success("修改成功")
              this.load()
            }
          },
      )
      this.dialogFormVisible = false
      this.fileName = ''
      this.fileDescription = ''
    },
    //收藏
    collectBtn(row) {
      this.request.get('/CU/update', {
        params: {
          fileName: row.fileName,
          fileUserId: row.fileUserId,
        }
      }).then(
          res => {
            if (res.code == 200) {
              this.$message.success("收藏成功")
            }
          }
      )
    },

    //编辑
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.load()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val
      this.load()
    },
    //多选框事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    //充值
    BuyIntegral() {
      this.buyIntegral = true;
      this.otherData.windowName = '积分购买'
    },
    BuyVIP() {
      if (this.vip !== 0) {
        this.$message.warning('您已经是vip用户')
        return;
      }
      this.VIPVisible = true;
      this.otherData.windowName = 'vip购买'
      this.request.get("/userExtend/vip/" + this.userID, {responseType: 'blob'}).then(
          res => {
            document.getElementById("VIPzxing").src = URL.createObjectURL(res);
          },
          Error => {
            console.log(Error)
          })
    },
    QRCode() {
      if (!this.money) {
        this.$message.error('请输入充值金额')
        return;
      }
      this.buyIntegral = false;
      this.zxingVisible = true;
      this.otherData.windowName = '请扫码充值'
      this.request.get("/userExtend/" + this.userID + "/" + this.money, {responseType: 'blob'}).then(
          res => {
            document.getElementById("zxing").src = URL.createObjectURL(res);
          },
          Error => {
            console.log(Error)
          })
      this.money = null;
    }
  },


}
</script>

<style scoped>
</style>